import React, { useState } from "react";
import styles from './transferinput.module.css';
import icon_input_no_eye from "@/assets/icon_input_no_eye.png"
import icon_input_eye from "@/assets/icon_input_eye.png"

export default function TransferPwdInput({ onInputChanged, extIcon, ...rest }) {

    // 当前 对话框编辑内容
    const [curInput, setCurInput] = useState("");

    // 当前输入类型
    const [curType, setCurType] = useState("password");

    // 当前输入类型-图标
    const [curTypeIcon, setCurTypeIcon] = useState(icon_input_no_eye);

    const onHandleInputChanged = (v) => {
        onInputChanged && onInputChanged(v);
    };

    const onHandleEyeClick = () => {
        if (curType === 'password') {
            setCurType('text');
            setCurTypeIcon(icon_input_eye);

        } else {
            setCurType('password');
            setCurTypeIcon(icon_input_no_eye);
        }
    };

    return (
        <div className={styles.transferInputRoot}>
            <div className={styles.transferInputPwdContent}>
                <div className={styles.transferInputPwdBackground}>
                    <input
                        className={styles.transferInputValue}
                        value={curInput}
                        type={curType}
                        onChange={(v) => {
                            let text = v.target.value;
                            setCurInput(t => { return text; });
                            onHandleInputChanged(text);
                        }}
                        {...rest} />
                </div>
                <img className={styles.transferInputExtPwdIcon} src={curTypeIcon} alt="" onClick={onHandleEyeClick} />
            </div>
        </div>
    )
}